<template>
    <section>
        <el-card class="box-card mt-20">
            <el-row>
                <el-col :span="20">
                    <h3>
                        任务状态: {{ dict.tasks_status[detail.task_status] }}通知书
                    </h3>
                    <div>
                        <span class="set-tips tips-1">
                            <span>1</span>
                            <p>下载检查通知书并盖章</p>
                            <el-button
                                    type="primary"
                                    plain
                                    @click="dowFile"
                            > <i class="el-icon-download"></i> 下载通知书</el-button>
                        </span>
                        <span class="set-tips tips-2">
                            <span>2</span>
                            <p>先上传盖章的检查通知书，并下发给该任务的专家</p>
                            <el-button
                                :type="detail.task_status == 0 ? 'primary' : 'info'"
                                :disabled="detail.task_status != 0"
                                @click="noticeDetail = true"
                            >上传并下发检查通知书</el-button>
                        </span>
                    </div>
                </el-col>
                <el-col  :span="4">
                    <div style="padding:15px 0;">
                        <el-button style="float: right; padding: 3px 0;" @click="$router.back()">返回</el-button>
                        <el-button style="float: right; margin-right:20px;"
                                   type="danger"
                                   @click="deleteTask"
                        >删除任务</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row :span="24" style=" padding:50px 20px; ">
                <el-col :span="24">
                    <div style="margin-top:20px">
                        <span class="item-title">高校</span>
                        <div class="item-conter">
                            <span>{{detail.check_unit_name}}</span>
                        </div>
                        <hr style="height:1px;border:none;border-top:1px solid #d8d8d8;"/>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div style="margin-top:20px">
                        <span class="item-title">检查组组长</span>
                        <div class="item-conter">
                            <span>{{detail.group_user_name}}</span>
                        </div>
                        <hr style="height:1px;border:none;border-top:1px solid #d8d8d8;"/>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div style="margin-top:20px;">
                        <span class="item-title">专家</span>
                        <div class="item-conter">
                            <span v-for="o in detail.check_user" :key="o.id" style="margin-right:24px">{{o.full_name}}  </span>
                        </div>
                        <hr style="height:1px;border:none;border-top:1px solid #d8d8d8;"/>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div style="margin-top:20px;">
                        <span class="item-title">观察员</span>
                        <div class="item-conter">
                            <span v-for="o in detail.observer_user" :key="o.id" style=" margin-right:24px">{{o.full_name}}  </span>
                        </div>
                        <hr style="height:1px;border:none;border-top:1px solid #d8d8d8;"/>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div style="width:300px;margin-top:20px;">
                        <span class="item-title">创建日期</span>
                        <div class="item-conter"><span>{{detail.gmt_created}}</span></div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog
                title="下发通知书"
                class="submit-tasks-dialog"
                :visible.sync="noticeDetail"
                v-loading="noticeDetailLoading"
                width="30%"
                :before-close="handleClose">
            <el-upload
                    class="upload-demo release-upload"
                    drag
                    action=""
                    :limit="1"
                    ref="reportFormalFileUpload"
                    :on-exceed="handleExceed"
                    :on-change="handleChangeFiles"
                    :on-remove="handleChangeFiles"
                    :http-request="httpRequest"
                    :show-file-list="true"
                    :file-list="fileLists"
                    :auto-upload="false"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传PDF,Word文件，大小不超过10MB</div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="noticeDetail = false"> 取 消 </el-button>
                <el-button type="primary" @click="sendNoticeBeforUploadFile"> 下发通知书 </el-button>
              </span>
        </el-dialog>
    </section>
</template>

<script>
    import {getTasksDetail, delTask, uploadNotification} from '../../api/task_manager_api'
    import dict from '../../common/js/dict';
    import {upload_file, isExistFile} from "../../api/common";
    import { saveAs } from '../../common/js/commons';


    export default {
        data() {

            return {
                //表单header样式
                dict:dict,
                listLoading: false,
                noticeDetailLoading: false,
                noticeDetail: false,
                currentYear: '',
                fileLists:[],
                detail: {
                    id: '',
                    check_unit_name: '',
                    check_unit_logo: '',
                    group_user_name: '',
                    check_user: [{}],
                    observer_user: []
                }
            }
        },
        methods: {
            getTasksInfo() {
                let params = {
                    id: this.$route.params.id
                }
                getTasksDetail(params).then((res) => {
                    if (res.status == 200) {
                        this.detail = JSON.parse(res.data.datas);
                    } else {
                        this.$message.error(res.status + " " + res.msg);
                    }
                });
            },

            //初始化页面
            initData() {
                this.currentYear = (new Date()).getFullYear();
                this.getTasksInfo();
            },
            deleteTask() {
                this.$confirm('确认将此任务永久删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delTask({id: this.detail.id}).then((res) => {
                        if (res.data.status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.dialogDetailFormVisible = false;
                            this.$router.back()
                        }
                    });
                });
            },
            sendNoticeBeforUploadFile() {
                if(this.fileLists.length == 0)  return this.$message.error('请选择带有公章的通知书扫描件!');
                this.noticeDetailLoading = true;
                this.$refs.reportFormalFileUpload.submit();
            },
            sendNotice(fileData) {
                let params = {
                    id: this.detail.id,
                    file_id:fileData.id
                }
                uploadNotification(params).then(res => {
                    if(res.status == 200){
                        this.noticeDetailLoading = false;
                        this.noticeDetail = false
                        this.$message({
                            type: 'success',
                            message: '通知书下发成功!'
                        });
                        this.getTasksInfo();
                    } else {
                        if (res.data.status === 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.fileLists = [];
                    }
                })
            },
            handleClose(){
                this.fileLists = []
                this.noticeDetail = false
            },
            beforeAvatarUpload (file) {
                // const extension = file.name.split('.')[1] === 'pdf'
                const isLt2M = file.size / 1024 / 1024 < 2
                // if (!extension) {
                //    this.$message.error('上传模板只能是本地 pdf 格式!');
                // }
                if (!isLt2M) {
                    this.$message.error('上传模板大小不能超过 2MB!');
                }
                //return extension && isLt2M;
                return isLt2M;
            },
            handleExceed(files, fileList) {
                this.$message.warning(`限制只能上传1个文件`);
            },
            handleChangeFiles(file, files) {
                this.fileLists = files;
            },
            httpRequest(item,files) {
                let formData = new FormData();
                formData.append('file', item.file);
                upload_file(formData).then((res) => {
                    let result = JSON.parse(res.data.datas);
                    if (res.data.status == 200) {
                        this.sendNotice(result)
                    } else {
                        if (res.data.status === 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.fileLists = [];
                    }
                });
            },
            dowFile(){
                if(this.detail.notification_file == null) return  this.$message.error('通知书文件不存在!');
                saveAs(this.detail.notification_file.path, '通知书')
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style scoped  lang="scss">
    h3{
        color:#333;
    }
    .dialog-footer{
        text-align: center;
        padding:0;
        display:block;
        width:100%;
    }
    .upload-demo.release-upload{
        padding-bottom:0;
    }
    .set-tips{
        display: inline-block;
        width: 170px;
        line-height: 20px;
        position:relative;
        vertical-align: text-top;
        left:60px;
        > p {
            margin:10px 0;
        }
        > span {
            display:block;
            width:30px;
            height:30px;
            line-height:30px;
            text-align:center;
            border-radius:15px;
            position:absolute;
            font-size:18px;
            color:#333;
            background:#bfeaff;
            left:-45px;
            top:5px;
        }
        &.tips-2{
            width:400px;
            margin-left:160px;
            &:before{
                content: '';
                height: 1px;
                width: 80px;
                background: #c1c1c1;
                position: absolute;
                left: -160px;
                top: 18px;
            }
        }
    }
    .item-title{
        display:block;
        line-height: 18px;
        color:#666;
    }
    .item-conter{
        display:block;
        width:100%;
        >span{
            font-weight:bold;
            color:#333;
        }
    }
    .mt-20{
        margin-top: 20px;
    }
    .box-card{
        padding: 10px 40px;
    }
</style>
<style lang="scss">
    .submit-tasks-dialog .el-dialog:before{
        content:'注：请上传带有公章的通知书扫描件';
        position:absolute;
        top:13px;
        right:50px;
    }
</style>